<template>
  <el-form
    ref="ruleForm"
    class="demo-ruleForm"
    label-width="100px"
    :model="form"
  >
    <el-form-item label="灌水定额" prop="irri_quota">
      <el-input
        v-model="form.irri_quota"
        class="wd200"
        clearable
        placeholder="灌水定额"
        type="number"
      >
        <template slot="append">mm</template>
      </el-input>
    </el-form-item>
    <el-form-item label="等级设定" prop="steps">
      <el-table border :data="form.steps" style="width: 100%">
        <el-table-column align="center" label="等级" type="index" width="60" />
        <el-table-column
          v-if="upDownShow"
          align="center"
          label="下限"
          prop="lower"
        >
          <template #default="{ row }">
            <el-input
              v-model="row.lower"
              clearable
              placeholder="下限"
              type="number"
            />
          </template>
        </el-table-column>
        <el-table-column
          v-if="upDownShow"
          align="center"
          label="上限"
          prop="upper"
        >
          <template #default="{ row }">
            <el-input
              v-model="row.upper"
              clearable
              placeholder="上限"
              type="number"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" label="颜色" prop="color">
          <template #default="{ row }">
            <el-color-picker v-model="row.color" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="默认" prop="address">
          <template #default="{ row, $index }">
            <el-switch
              v-model="row.active"
              :active-value="1"
              :inactive-value="0"
              @change="changeActive(row, $index)"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit">确定</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  export default {
    props: {
      gridType: {
        type: Object,
        default() {
          return {}
        },
      },
    },
    data() {
      return {
        form: {
          irri_quota: '20',
          steps: [
            { step: 1, lower: 0, upper: 0.33, color: '#b7ecef', active: 0 },
            {
              step: 2,
              lower: 0.33,
              upper: 0.67,
              color: '#1e82e0',
              active: 1,
            },
            { step: 3, lower: 0.67, upper: 1, color: '#09098f', active: 0 },
          ],
        },
        upDownShow: true,
      }
    },
    watch: {
      gridType: {
        handler(newVal) {
          this.form = newVal
          if (['uav', 'multi'].includes(newVal.name)) {
            this.upDownShow = false
          }
        },
        deep: true,
        immediate: true,
      },
    },
    methods: {
      submit() {
        const post_data = {
          field_id: this.form.field_id,
          name: this.form.name,
          policy_type: this.form.policy_type,
          irri_quota: this.form.irri_quota,
          steps: this.form.steps,
        }
        this.$emit('updateGridType', this.form.id, post_data)
      },
      changeActive(row, index) {
        const active = row.active
        if (
          this.form.steps.filter((val) => {
            return val.active === 1
          }).length === 0
        ) {
          this.$message.error('等级设定中必须有一个默认值')
          this.form.steps[index].active = 1
          return
        }
        this.form.steps = this.form.steps.map((item, idx) => {
          item.active = 0
          if (active && index === idx) {
            item.active = 1
          }
          return item
        })
      },
    },
  }
</script>

<style lang="scss" scoped></style>
